
<template>
  <uv-navbar
    :bgColor="bgColor"
    :placeholder="placeholder"
    :border="border"
    :title="title"
    :leftIconColor="textCol"
    :fixed="fixed"
  >
    <template v-slot:left>
      <view class="uv-nav-slot" v-if="showBack">
        <uv-icon name="arrow-left" :color="textCol" size="38rpx" @click="leftClick"></uv-icon>
        <slot name="left"></slot>
      </view>
    </template>
    <template #center>
      <slot name="middle">
        <view :style="{ color: textCol }" class="titcss">
          {{ title }}
        </view>
      </slot>
    </template>
  </uv-navbar>
</template>

<script lang="ts" setup>
import { getIsTabbar } from '@/utils/index'
const props = defineProps({
  title: String,
  bgColor: {
    type: String,
    default: '#fff',
  },
  leftIconColor: String,
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  placeholder: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: false,
  },
  fixed: {
    type: Boolean,
    default: true,
  },
  textCol: {
    type: String,
    default: '#000000',
  },
  leftText: String,
  
})

const showBack = ref(true)

const leftClick = () => {
  uni.navigateBack()
}

// 判断是否在tabbar页，tabbar页不显示返回按钮
onMounted(() => {
  showBack.value = getIsTabbar() ? false : true
})
</script>

<style scoped lang="scss">
// @mixin flex($direction: row) {
//   /* #ifndef APP-NVUE */
//   display: flex;
//   /* #endif */
//   flex-direction: $direction;
// }
.uv-nav-slot {
  // @include flex;
  // align-items: flex-start;
  display: flex;
  align-items: center;
}

.titcss {
  font-family:
    PingFang SC,
    PingFang SC;
  font-size: 33rpx;
  text-align: center;
  font-weight: bold;
}
</style>
